<template>
  <a-modal
    title="地址"
    width="70%"
    :visible="visible"
    :confirmLoading="loading"
    okText="选择"
    @ok="handleChoose"
    @cancel="
      () => {
        this.visible = false
      }
    "
  >
    <template slot="footer">
      <a-button class="floot" @click="AddClick"> 录入地址 </a-button>

      <a-button
        @click="
          () => {
            this.visible = false
          }
        "
      >
        取消
      </a-button>
      <a-button key="submit" type="primary" @click="handleChoose"> 确认 </a-button>
    </template>
    <a-card :bordered="false">
      <a-table
        ref="table"
        :scroll="{ y: scroll }"
        :columns="columns"
        :rowKey="(row, index) => row.Id"
        :dataSource="data"
        :pagination="pagination"
        :loading="loading"
        @change="handleTableChange"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type: type }"
        :bordered="true"
        size="small"
      >
        <span slot="CreateTime" slot-scope="CreateTime">{{ timeFormat(CreateTime, 'YYYY-MM-DD HH:mm') }}</span>
      </a-table>
    </a-card>
    <a-modal
      title="录入"
      width="40%"
      :visible="show"
      @ok="Submit"
      @cancel="
        () => {
          this.show = false
        }
      "
    >
      <a-form-model :rules="rules" ref="form" :model="entity">
        <a-form-model-item label="收件人" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }" prop="Addressee">
          <a-input v-model="entity.Addressee" autocomplete="off" placeholder="收件人" />
        </a-form-model-item>
        <a-form-model-item label="联系电话" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }" prop="TelNumber">
          <a-input v-model="entity.TelNumber" autocomplete="off" placeholder="联系电话" />
        </a-form-model-item>
        <a-form-model-item label="收件地址" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }" prop="Address">
          <a-input v-model="entity.Address" autocomplete="off" placeholder="收件地址" />
        </a-form-model-item>
        <a-form-model-item label="备注" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }" prop="Remark">
          <a-input v-model="entity.Remark" autocomplete="off" placeholder="备注" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </a-modal>
</template>

<script>
// import EditForm from './EditForm'
// import List from '../Cust_CustomerLinkMan/List.vue'
import moment from 'moment'
const columns = [
  { title: '收件人', dataIndex: 'Addressee' },
  { title: '联系电话', dataIndex: 'TelNumber' },
  { title: '收件地址', dataIndex: 'Address' },
  { title: '备注', dataIndex: 'Remark' },
]
export default {
  components: {
    // EditForm,
    // List
  },
  props: {
    type: { type: String, default: 'radio', required: false },
  },

  created() {
    this.getlist()
  },
  computed: {
    scroll() {
      // //console.log()
      return Number(document.documentElement.clientHeight) * 0.45
    },
  },
  data() {
    return {
      CumCode: '',
      user: 1,
      layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 18 },
      },
      show: false,
      data: [],
      list: [], // 省级
      listChildren: [], // 市
      county: [], // 县
      pagination: {
        current: 1,
        pageSize: 25,
        showTotal: (total, range) => `总数:${total} 当前:${range[0]}-${range[1]}`,
        pageSizeOptions: ['25', '50', '100'], // 设置pageSize的可选值，页面可以通过下拉框进行选择
        showSizeChanger: true,
      },
      filters: {},
      sorter: { field: 'Id', order: 'desc' },
      loading: false,
      columns,
      entity: {},

      rules: {
        Addressee: [{ required: true, message: '未输入', trigger: 'blur' }],
        TelNumber: [{ required: true, message: '未输入', trigger: 'blur' }],
        Address: [{ required: true, message: '未输入', trigger: 'blur' }],
      },
      queryParam: {},
      selectedRows: [],
      selectedRowKeys: [],
      visible: false,
    }
  },
  methods: {
    Submit() {
      this.$refs['form'].validate((valid) => {
        if (!valid) {
          return
        }
        this.loading = true
        if (this.CumCode) {
          this.entity.CustomerId = this.CumCode
        }
        this.$http.post('/CustomerManagement/Cust_AddressBook/SaveData', this.entity).then((resJson) => {
          this.loading = false

          if (resJson.Success) {
            this.$message.success('录入成功,请重新选择地址')
            this.visible = false
            this.show = false
          } else {
            this.$message.error(resJson.Msg)
          }
        })
      })
    },
    inputKeyDown(e) {
      if (e.keyCode === 13) {
        if (!this.queryParam.Keyword) return this.$message.error('请输入查询条件')

        this.getDataList()
      }
    },
    Repossess1() {
      this.queryParam = []
      this.getDataList()
    },

    userChange(n, b) {
      this.getDataList()
    },
    // 市级change
    city(e) {
      this.$http.post('/Base_BasicData/Base_District/GetDataListByPId?pId=' + e, {}).then((resJson) => {
        this.loading = false
        this.listChildren = resJson.Data
      })
    },

    // 县change
    village(e) {
      this.$http.post('/Base_BasicData/Base_District/GetDataListByPId?pId=' + e, {}).then((resJson) => {
        //console.log('res', resJson)
        this.loading = false
        this.county = resJson.Data
        //console.log('333', this.county)
      })
    },
    // 获取省份信息
    getlist(e) {
      this.$http.post('/Base_BasicData/Base_District/GetDataListByPId?pId=0', {}).then((resJson) => {
        //console.log('res', resJson)
        this.loading = false
        this.list = resJson.Data
        //console.log('333', this.list)
      })
    },
    handleTableChange(pagination, filters, sorter) {
      this.pagination = { ...pagination }
      this.filters = { ...filters }

      this.getDataList()
    },
    getDataList(CumCode) {
      this.selectedRowKeys = []

      this.loading = true
      this.$http

        .post('/CustomerManagement/Cust_AddressBook/GetDataListByMoreCondition', {
          PageIndex: this.pagination.current,
          PageRows: this.pagination.pageSize,
          SortField: this.sorter.field || 'Id',
          SortType: this.sorter.order,
          Search: [{ Condition: 'CustomerId', Keyword: CumCode }],
          ...this.filters,
        })
        .then((resJson) => {
          this.loading = false
          this.data = resJson.Data
          if (this.data) {
            const pagination = { ...this.pagination }
            pagination.total = resJson.Total
            this.pagination = pagination
          }
        })
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },

    hasSelected() {
      return this.selectedRowKeys.length > 0
    },
    AddClick() {
      this.show = true
    },
    handleDelete(ids) {
      var thisObj = this
      this.$confirm('确认删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        title: '确认删除吗?',
        onOk() {
          return new Promise((resolve, reject) => {
            thisObj.$http.post('/CustomerManagement/Cust_CustomerInfoFormal/DeleteData', ids).then((resJson) => {
              resolve()

              if (resJson.Success) {
                thisObj.$message.success('操作成功!')

                thisObj.getDataList()
              } else {
                thisObj.$message.error(resJson.Msg)
              }
            })
          })
        },
      })
    },
    openChoose(CumCode) {
      console.log(CumCode)
      this.queryParam = {}
      this.CumCode = CumCode
      this.entity = {}
      this.pagination.current = 1

      this.getDataList(CumCode)

      this.visible = true
    },
    handleChoose() {
      this.visible = false
      console.log(this.selectedRows)
      this.$emit('onChoose', this.selectedRows)

      this.pagination.current = 1

      this.getDataList()
    },
  },
}
</script>

<style>
.floot {
  float: left;
}
</style>
